@media (min-width:800px) {
  .outerContainer {
    height: 100vh;
    display: grid;
    align-items: stretch;
  }

  .outerContainer.mode1.A, .outerContainer.mode2 {
    grid-template-columns: auto 1fr 1fr 1fr auto;
    grid-template-rows: auto auto auto 1fr;
  }

  .outerContainer.mode1.B,.outerContainer.mode1.C {
    grid-template-columns: auto 1fr 1fr 1fr auto;
    grid-template-rows: auto auto auto auto 1fr;
  }


  #banner {
    padding: 10px;
    background-color: var(--bannerBackColor);
    height: 120px;
    margin-bottom: 25px;
    /*    display: grid;
    grid-template-columns: repeat(12, auto);
    grid-template-rows: repeat(3, 1fr);*/
  }

  .mode1.A #banner, .mode1.B #banner, .mode1.C #banner, .mode2 #banner {
    grid-row: 1;
    grid-column: 1 /span 5;
  }

  #inputs {
    padding: 10px;
  }

  .mode1.A #inputs, .mode1.B #inputs, .mode1.C #inputs, .mode2 #inputs {
    grid-row: 2;
    grid-column: 3;
  }





#options {
  padding: 10px;
}
.mode1.A #options {
  display: none;
}
.mode2 #options {
  display: none;
}
.mode1.B #options {
  grid-row: 3;
  grid-column: 3;
}
.mode1.C #options {
  grid-row: 3;
  grid-column: 3;
}



  #outputs {
    padding: 10px;
  }
  .mode1.A #outputs, .mode2 #outputs {
    grid-row: 3;
    grid-column: 3;
  }
  .mode1.B #outputs {
    grid-row: 4;
    grid-column: 3;
  }
  .mode1.C #outputs {
    grid-row: 4;
    grid-column: 3;
  }


  #footer {
    padding: 10px;
  }
  .mode1.A #footer, .mode2 #footer {
    grid-row: 4;
    grid-column: 3;
  }
  .mode1.B #footer {
    grid-row: 5;
    grid-column: 3;
  }
  .mode1.C #footer {
    grid-row: 5;
    grid-column: 3;
  }





}




@media (max-width:801px) {
  .outerContainer {
    display: none;
  }
}

/*  section#hidden {
        grid-row: 1;
    grid-column: 1/span 4;
    padding: 0px;
    display: none;
  }

  section#banner {
    grid-row: 2;
    grid-column: 1/span 4;
    background-color: var(--bannerBackColor);
    height: 120px;
    display: grid;
    grid-template-columns: repeat(12, auto);
    grid-template-rows: repeat(3, 1fr);
  }



  section#inputs.init {
    grid-column: 2/span 2;
    display: flex;
    justify-content: center;
  }

  section#inputs.calculated {
    grid-column: 2;
  }

  section#charts.init {
    display: none;
  }

  section#charts.calculated {
    grid-row: 3;
    grid-column: 3;
    padding: 10px;
  }

  section#options {
    grid-row: 5;
    grid-column: 2/span 2;
    padding: 10px;
  }

  section#outputs {
    grid-row: 6;
    grid-column: 2/span 2;
    padding: 10px;
  }

  section#footer {
    grid-row: 7;
    grid-column: 2/span 2;
    min-height: 25px;
    text-align: right;
    padding: 10px;
  }*/
/*@media (max-width:801px) {
  .outerContainer {
    height: 100vh;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 0 auto auto;
     align-items: stretch;
  }

section#hidden {
  grid-row: 1;
  grid-column: 1/span 4;
  padding: 20px;
  display: none;
}

section#banner {
  grid-row: 2;
  grid-column: 1;
  background-color: var(--bannerBackColor);
  height: 120px;
  padding:10px;
}

section#inputs {
  grid-row: 3;
  padding: 10px;
}

section#inputs.init {
  grid-column: 1;
  display: flex;
  justify-content: center;
}

section#inputs.calculated {
  grid-column: 1;
}

section#charts.init {
  grid-row: 4;
  grid-column: 1;
  padding: 10px;
}

section#charts.calculated {
  grid-row: 4;
  grid-column: 1;
  padding: 10px;
}

section#options {
  grid-row: 5;
  grid-column: 1;
  padding: 10px;
}

section#outputs {
  grid-row: 6;
  grid-column: 1;
  padding: 10px;
}

section#footer {
  grid-row: 7;
  grid-column: 1;
  min-height: 25px;
  text-align: right;
  padding: 10px;
}
}*/